<!-- 学员评价 -->
<template>
  <div class="student">
    <div class="student_title">
      <img src="../../assets/img/Students.png" alt="学员评价">
    </div>
    <div class="student_bottom">
      <div class="swiper-containers">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="teas">
              <div class="tea_info">
                <li><img src="../../assets/img/houqiong.png" alt=""></li>
                <li>候琼</li>
                <p>靠谱的机构。注重学员具体、个性的问题。临考试老师给我们押题，竟然压中了，好激动。</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="teas1">
              <div class="tea_info">
                <li><img src="../../assets/img/liangchen.png" alt=""></li>
                <li>梁辰</li>
                <p>卫生搞得好，老师颜值高，有耐心，认真负责，所教的方法很实用，能因材施教。 </p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="teas2">
              <div class="tea_info">
                <li><img src="https://common-image-1258943427.cos.ap-beijing.myqcloud.com/ansjy_pc/img/mingming.png" alt=""></li>
                <li>许铭铭</li>
                <p>模拟面试的时候，紧张得不得了，马老师让我到教研室对所有老师介绍自己，后来面试很自信。</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="teas3">
              <div class="tea_info">
                <li><img src="../../assets/img/xiaoqi.png" alt=""></li>
                <li>杨小旗</li>
                <p>上课的时候很严肃，经常问听懂没有，我说听懂了，老师还要再确定一遍，生怕我没有听懂。</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="teas">
              <div class="tea_info">
                <li><img src="../../assets/img/lijie.png" alt=""></li>
                <li>李洁</li>
                <p>取名真实，岸上等你，继续保持。谢谢岸上教育。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev">
      </div>
      <div class="swiper-button-next">
      </div>
      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>
  </div>
</template>

<script>
// import $ from 'jquery'
import Swiper from 'swiper'
export default {
  data () {
    return {
      list: [
        {
          backgroundImage: 'url(' + require('../../assets/img/ass1.png') + ')',
          backgroundRepeat: 'no-repeat'
        },
        {
          backgroundImage: 'url(' + require('../../assets/img/ass2.png') + ')',
          backgroundRepeat: 'no-repeat'
        },
        {
          backgroundImage: 'url(' + require('../../assets/img/ass3.png') + ')',
          backgroundRepeat: 'no-repeat'
        },
        {
          backgroundImage: 'url(' + require('../../assets/img/ass4.png') + ')',
          backgroundRepeat: 'no-repeat'
        }
      ]
    }
  },

  created () {
    // this.getbac()
  },

  mounted () {
    // eslint-disable-next-line
    new Swiper('.swiper-containers', {
      autoplay: false,
      loop: true,
      // 如果需要分页器
      // pagination: {
      //   el: '.swiper-pagination'
      // },
      slidesPerView: 4,
      roundLengths: true,
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      // 如果需要滚动条
      scrollbar: '.swiper-scrollbar'
    })
  },

  components: {},

  computed: {},

  methods: {
  }
}

</script>
<style lang='scss' scoped>
.student{
  width: 1200px;
  height: 369px;
  margin: 60px auto 80px;
  // overflow: hidden;
  position: relative;
  z-index: 1;
}
.student_title{
  height: 29px;
  line-height: 29px;
}
.student_bottom{
  margin-top: 20px;
  overflow: hidden;
}
.teas{
  background: url('../../assets/img/ass1.png') no-repeat;
}
.teas1{
  background: url('../../assets/img/ass2.png') no-repeat;
}
.teas2{
  background: url('../../assets/img/ass3.png') no-repeat;
}
.teas3{
  background: url('../../assets/img/ass4.png') no-repeat;
}
.tea_info{
  width: 285px;
  height: 320px;
  background: url('../../assets/img/student.png') no-repeat;
  background-size: cover;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0px 31px;
  cursor: pointer;
}
.tea_info li{
  text-align: center;
}
.tea_info li:first-child{
  margin-top: 33px;
}
.tea_info li:first-child img{
  width: 90px;
  height: 90px;
  border-radius: 50%;
}
.tea_info li:nth-child(2){
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:21px;
  margin-top: 21px;
}
.tea_info p{
  height: 145px;
  font-size:14px;
  color:rgba(34,34,34,1);
  line-height:24px;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.swiper-button-next{
  width: 50px;
  height: 50px;
  right: -60px;
  outline: none;
  background: url('../../assets/img/right.png') no-repeat;
}
.swiper-button-prev{
  width: 50px;
  height: 50px;
  left: -60px;
  outline: none;
  background: url('../../assets/img/left.png') no-repeat;
}
.swiper-button-prev::after{
  content: '';
}
.swiper-button-next::after{
  content: '';
}
</style>
